<template>
    <div>
      <!--左侧空白200px-->
      <el-container>
        <el-aside width="200px"></el-aside>
        <el-main>
          <!--标签-->

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="推荐" name="first">推荐</el-tab-pane>
            <el-tab-pane label="排行榜" name="second">排行榜</el-tab-pane>
            <el-tab-pane label="歌单" name="third">歌单</el-tab-pane>
            <el-tab-pane label="歌手" name="fourth">歌手</el-tab-pane>
            <el-tab-pane label="新碟" name="fiverh">新碟</el-tab-pane>
            <!--按钮及模态框-->
            <el-row style="float: left">
              全部&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="primary"  @click="dialogVisible = true">选择分类</el-button>
            </el-row>
          </el-tabs>






          <el-dialog
            title="选择分类" width="30%"
            :visible.sync="dialogVisible">
            <!-- :before-close="handleClose"-->
            <span>
              <div>
              <el  target="_blank" style="font-size: 20px;margin-left: 10px">语种</el>
                <el-link type="primary" style="font-size: 20px;margin-left: 10px">华语</el-link>
                <el-link type="success" style="font-size: 20px;margin-left: 10px">欧美</el-link>
                <el-link type="warning" style="font-size: 20px;margin-left: 10px">日语</el-link>
                <el-link type="danger" style="font-size: 20px;margin-left: 10px">韩语</el-link>
                <el-link type="info" style="font-size: 20px;margin-left: 10px">粤语</el-link>
            </div>
                 <div>
              <el  target="_blank" style="font-size: 20px;margin-left: 10px">风格</el>
                <el-link type="primary" style="font-size: 20px;margin-left: 10px">流行</el-link>
                <el-link type="success" style="font-size: 20px;margin-left: 10px">摇滚</el-link>
                <el-link type="warning" style="font-size: 20px;margin-left: 10px">民谣</el-link>
                <el-link type="danger" style="font-size: 20px;margin-left: 10px">电子</el-link>
                <el-link type="info" style="font-size: 20px;margin-left: 10px">古典</el-link>
            </div>
                 <div>
              <el  target="_blank" style="font-size: 20px;margin-left: 10px">场景</el>
                <el-link type="primary" style="font-size: 20px;margin-left: 10px">清晨</el-link>
                <el-link type="success" style="font-size: 20px;margin-left: 10px">夜晚</el-link>
                <el-link type="warning" style="font-size: 20px;margin-left: 10px">工作</el-link>
                <el-link type="danger" style="font-size: 20px;margin-left: 10px">学习</el-link>
                <el-link type="info" style="font-size: 20px;margin-left: 10px">游戏</el-link>
            </div>
                 <div>
              <el  target="_blank" style="font-size: 20px;margin-left: 10px">情感</el>
                <el-link type="primary" style="font-size: 20px;margin-left: 10px">怀旧</el-link>
                <el-link type="success" style="font-size: 20px;margin-left: 10px">清新</el-link>
                <el-link type="warning" style="font-size: 20px;margin-left: 10px">回忆</el-link>
                <el-link type="danger" style="font-size: 20px;margin-left: 10px">治愈</el-link>
                <el-link type="info" style="font-size: 20px;margin-left: 10px">放松</el-link>
            </div>
                 <div>
              <el target="_blank" style="font-size: 20px;margin-left: 10px">主题</el>
                <el-link type="primary" style="font-size: 20px;margin-left: 10px">综艺</el-link>
                <el-link type="success" style="font-size: 20px;margin-left: 10px">70后</el-link>
                <el-link type="warning" style="font-size: 20px;margin-left: 10px">80后</el-link>
                <el-link type="danger" style="font-size: 20px;margin-left: 10px">90后</el-link>
                <el-link type="info" style="font-size: 20px;margin-left: 10px">KTV</el-link>
            </div>

            </span>
            <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
        </span>
          </el-dialog>


        <hr>


          <div>
          <!--歌曲-->
          <el-row>
            <el-col :span="5" v-for="(o, index) in 12" :key="o" :offset="index > 0 ? 1 : 1">
              <el-card :body-style="{ padding: '10px' }">
                <img src="http://qhwykybp2.hd-bkt.clouddn.com/001.jpg" class="image">
                <div style="padding: 12px;">
                  <span>歌曲名称</span>
                  <div class="bottom clearfix">
                    <!--<time class="time">{{ currentDate }}</time>-->
                    <el-button type="text" class="button">操作按钮</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          </div>

          <!--分页-->
          <el-pagination
            background
            :page-size="10"
            :pager-count="11"
            layout="prev, pager, next"
            :total="200">
          </el-pagination>


        </el-main>
        <el-aside width="200px"></el-aside>
      </el-container>

    </div>
</template>

<script>
    export default {
        name: "index",
      data() {
        return {
          dialogVisible: false,
          activeName: 'third',
          currentDate: new Date(),
        };



      },
      methods: {
     /*   handleClick(tab, event) {
          console.log(tab, event);
        }*/
      }
    }

</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
